@import "/src/assets/variables";

@topMenuHeight: @toolHeight + 4px;
@topStatusHeight: @toolHeight + 4px;

.icon {
  height: @toolHeight - 2px;
  margin: 1px 0;
  padding: 3px 4px;
  border-radius: 2px;
  font-size: 16px;
  color: @iconColor;
  user-select: none;

  &:hover {
    background-color: @toolItemIconHoverBgColor;
  }

  &:active {
    background-color: @toolItemIconActiveBgColor;
  }

  //svg, svg g, svg g path, svg g rect {
  //  fill: @iconColor;
  //}
}

.iconDisable {
  color: @fontDisableColor !important;
  cursor: default !important;

  &:hover {
    background-color: @toolBgColor !important;
  }

  svg, svg g, svg g path, svg g rect, svg polygon, svg path {
    fill: @fontDisableColor !important;
  }
}

// -------------------------------------------------------------------------------- TopMenu

.topMenu {
  position: absolute;
  height: @topMenuHeight;
  width: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background-color: @toolBgColor;
  border-bottom: 1px solid @splitColor;
  align-items: center;
  z-index: 9;
}

.topMenuLogoImg {
  height: @toolHeight - 2px;
  margin-left: 8px;
}

.topMenuLogoText {
  padding: 3px;
  color: @fontColor;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  user-select: none;
}

.topMenuLogoTextVersion {
  padding: 8px 0 3px 0;
  font-size: 10px;
  font-weight: normal;
  color: @versionColor;
  user-select: none;
}

// -------------------------------------------------------------------------------- TopStatus

.topStatus {
  position: absolute;
  height: @topStatusHeight;
  width: 100%;
  top: @topMenuHeight;
  left: 0;
  box-sizing: border-box;
  background-color: @toolBgColor;
  border-bottom: 1px solid @borderColor;
  align-items: center;
  z-index: 9;
}

.topStatusFileResourcePath {
  padding: 5px 0;
  height: 100%;
  font-size: 14px;
  color: @fontColor !important;
}

.topStatusFileModify {
  color: @fileModifyColor !important;
  display: inline-block;
}

.copyIcon {
  padding-left: 3px;
  padding-right: 3px;
  margin: 0 2px;
  cursor: default !important;
}

// -------------------------------------------------------------------------------- BottomTabs

.bottomTabs {
  position: absolute;
  height: @toolHeight;
  width: 100%;
  bottom: @toolHeight;
  left: 0;
  box-sizing: border-box;
  background-color: @toolBgColor;
  border-top: 1px solid @borderColor;
  align-items: center;
  z-index: 9;
}

.bottomTabsFirst {
  margin-left: @toolWidth;
}

.bottomTabsItem {
  height: 100%;
  padding: 4px 6px 3px 6px;
  color: @fontColor;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  text-align: center;
  user-select: none;

  span {
    font-size: 16px;
    color: @iconColor;
    padding-right: 2px;
  }

  &:hover {
    background-color: @toolItemHoverBgColor;
  }
}

.bottomTabsItemText {
  font-size: 13px !important;
  position: relative !important;
  bottom: 2px !important;
}

.bottomTabsItemActive {
  color: @fontActiveColor;
  background-color: @toolItemActiveBgColor;
}

// -------------------------------------------------------------------------------- BottomStatus

.bottomStatus {
  position: absolute;
  height: @toolHeight;
  width: 100%;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  background-color: @toolBgColor;
  border-top: 1px solid @splitColor;
  align-items: center;
  z-index: 9;
}

.bottomStatusFirst {
  margin-left: @toolWidth;
}

.bottomStatusItem {
  height: 100%;
  padding: 4px 6px;
  color: @fontColor;
  font-size: 12px;
  text-align: center;
  user-select: none;
}

.bottomLoadingText {
  //transform: scale(0.8, 0.8);
  //transform-origin: right;
  padding-right: 0;
  margin-right: 0;
}

.bottomLoadingProgressBar {
  height: 5px !important;
  width: 152px !important;
}

// -------------------------------------------------------------------------------- LeftTabs

.leftTabs {
  position: absolute;
  width: @toolWidth;
  height: unset !important;
  top: @topMenuHeight + @topStatusHeight;
  bottom: @toolHeight * 2;
  left: 0;
  box-sizing: border-box;
  background-color: @toolBgColor;
  border-right: 1px solid @borderColor;
  align-items: center;
  z-index: 9;
}

//noinspection DuplicatedCode
.leftTabsItem {
  width: 100%;
  padding: 6px 0;
  color: @fontColor;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 2px;
  text-align: center;
  user-select: none;

  span {
    font-size: 14px;
    position: relative;
    left: -1px;
    color: @iconColor;
  }

  &:hover {
    background-color: @toolItemHoverBgColor;
  }
}

.leftTabsItemActive {
  color: @fontActiveColor !important;
  background-color: @toolItemActiveBgColor !important;
}

// -------------------------------------------------------------------------------- RightTabs

.rightTabs {
  position: absolute;
  width: @toolWidth;
  height: unset !important;
  top: @topMenuHeight + @topStatusHeight;
  bottom: @toolHeight * 2;
  right: 0;
  box-sizing: border-box;
  background-color: @toolBgColor;
  border-left: 1px solid @borderColor;
  align-items: center;
  z-index: 9;
}

//noinspection DuplicatedCode
.rightTabsItem {
  width: 100%;
  padding: 6px 0;
  color: @fontColor;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 2px;
  text-align: center;
  user-select: none;

  span {
    font-size: 14px;
    position: relative;
    left: -1px;
    color: @iconColor;
  }

  &:hover {
    background-color: @toolItemHoverBgColor;
  }
}

.rightTabsItemActive {
  color: @fontActiveColor !important;
  background-color: @toolItemActiveBgColor !important;
}

// -------------------------------------------------------------------------------- Center

.center {
  position: absolute;
  top: @topMenuHeight + @topStatusHeight;
  bottom: @toolHeight * 2;
  left: @toolHeight;
  right: @toolHeight;
}

// -------------------------------------------------------------------------------- VerticalSplit

.verticalSplit {
  display: flex;
  flex-direction: column;
}

.verticalSplitGutter {
  width: 100%;

  height: 16px !important;
  margin: -12px 0 -4px 0;
  background: none;
  opacity: 0;
  box-sizing: border-box;
  border: none;
  cursor: ns-resize !important;
  z-index: 999;
}

.verticalSplitHideGutter .verticalSplitGutter {
  display: none;
}

.bottomPane {
  box-sizing: border-box;
  background-color: @paneBgColor;
}

.verticalSplitTabs {
  width: 100%;
  height: @toolHeight + 2px;
  background-color: @splitBgColor;
  border-top: 1px solid @borderColor;
  border-bottom: 1px solid @borderColor;
  border-left: none;
  border-right: none;
  box-sizing: border-box;
}

.verticalSplitTabsLabel {
  height: 100%;
  box-sizing: border-box;
  color: @fontColor;
  font-size: 13px;
  user-select: none;
  padding: 4px 8px 4px 4px;
}

.verticalSplitTabsItem {
  height: 100%;
  box-sizing: border-box;
  color: @fontColor;
  font-size: 12px;
  user-select: none;
  cursor: default;

  &:hover {
    background-color: @splitHoverBgColor !important;
  }
}

.verticalSplitTabsItemLabel {
  display: inline-block;
  padding: 5px 4px 6px 8px;
}

.verticalSplitTabsItemClose {
  display: inline-block;
  margin-right: 4px;
  font-size: 12px;
  border-radius: 8px;
  color: @splitIconColor;
  //cursor: pointer;

  svg {
    padding: 2px;
  }

  &:hover {
    color: @splitHoverBgColor !important;
    background-color: @splitIconHoverColor !important;
  }
}

.verticalSplitTabsItemActive {
  color: @fontColor;
  border-bottom: 2px solid @splitBottomColor !important;
}

// -------------------------------------------------------------------------------- HorizontalSplit

.horizontalSplit {
  display: flex;
  flex-direction: row;
}

.horizontalSplitGutter {
  height: 100%;
  width: 16px !important;
  margin: 0 -12px 0 -4px;
  background: none;
  opacity: 0;
  box-sizing: border-box;
  border: none;
  cursor: ew-resize !important;
  z-index: 999;
}

.horizontalLeftSplitHideGutter {
  .leftSplitGutter {
    display: none;
  }
}

.horizontalRightSplitHideGutter {
  .rightSplitGutter {
    display: none;
  }
}

.leftPane {
  box-sizing: border-box;
  background-color: @paneBgColor;
  border-right: 1px solid @borderColor;
}

.rightPane {
  box-sizing: border-box;
  background-color: @paneBgColor;
  border-left: 1px solid @borderColor;
}

// -------------------------------------------------------------------------------- Editor

.editorTabs {
  height: @toolHeight + 4px;
  background-color: @editorTabsBgColor;
  border-bottom: 1px solid @editorTabsBottomColor;
  overflow: hidden;
}

.fileTabsItem {
  height: 100%;
  box-sizing: border-box;
  padding: 4px 8px 2px 8px;
  color: @fileTabsColor;
  font-size: 14px;
  user-select: none;
  cursor: default !important;

  &:hover {
    color: @fontColor !important;
    background-color: @fileTabsHoverBgColor !important;
  }
}

.fileTabsItemClose {
  border-radius: 8px;
  color: @fileTabsCloseIconColor;
  margin-left: 2px;

  svg {
    padding: 3px;
  }

  &:hover {
    color: @fileTabsCloseIconHoverColor !important;
    background-color: @fileTabsCloseIconHoverBgColor !important;
  }
}

.fileTabsItemActive {
  color: @fileTabsActiveColor;
  background-color: @fileTabsActiveBgColor;
  border-bottom: 2px solid @fileTabsBottomColor !important;
}

.fileTabsItemModify {
  color: @fileModifyColor;
}

.fileTabsItemType {
  font-size: 14px;
  color: @fileTabsTypeIconColor;
  padding-right: 3px;
}

.editorWrapper {
  width: 100%;
  height: calc(100% - (@toolHeight + 4px)) !important;
  background-color: @editorBgColor;
}

.editor {
  width: 100%;
  height: 100%;

  :global(.monaco-editor.vs-dark) {
    :global(.overflow-guard .margin .margin-view-overlays) {
      box-sizing: border-box;
      border-right: 1px solid @editorSplitRightColor !important;
    }

    :global(.editor-widget.suggest-widget) {
      z-index: 999 !important;
    }
  }
}

// -------------------------------------------------------------------------------- EmptyEditor
.emptyEditor {
  width: 100%;
  height: 100%;
  background-color: #282828;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;

  p {
    font-size: 18px;
    color: #A0A0A0;

    em {
      margin-left: 16px;
      color: #589DF6;
      font-style: normal;
    }
  }
}
